<template>
  <view class="app-container">
    <!-- 顶部导航 -->
    <u-navbar title="消息通知" autoBack leftIcon="arrow-left" fixed safeAreaInsetTop />

    <view class="page-wrap">
      <!-- 消息通知列表 -->
      <view class="message-card" v-for="(msg, index) in messages"  :key="index" @click="goDetail(msg)" >
        <view class="message-header">
          <text class="message-title">{{ msg.title }}</text>
          <text class="message-time">{{ msg.time }}</text>
        </view>
        <view class="message-body">
          <text>{{ msg.content }}</text>
        </view>
      </view>

      <!-- 空状态 -->
      <u-empty  v-if="messages.length === 0"  text="暂无消息" mode="list" />
    </view>
  </view>
</template>

<script lang="js">
import { ref } from "vue"

export default {
  setup() {
    const messages = ref([
      {
        title: "订单支付成功",
        time: "2025-09-09 10:30",
        content: "您有一笔新订单已支付成功，请尽快处理。",
        id: 1
      },
      {
        title: "提现到账通知",
        time: "2025-09-08 18:00",
        content: "您申请的提现 1000 元已到账，请注意查收。",
        id: 2
      },
      {
        title: "系统公告",
        time: "2025-09-07 09:15",
        content: "平台将于 2025 年 9 月 12 日凌晨 2 点至 6 点进行维护。",
        id: 3
      }
    ])

    // 点击进入详情
    function goDetail(msg) {
      uni.navigateTo({
        url: `/pages/merchant/message/detail?id=${msg.id}`
      })
    }

    return {
      messages,
      goDetail
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

.page-wrap {
  margin-top: 150rpx;
  padding: 24rpx;
  padding-bottom: 120rpx;
}

.message-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.message-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-body {
  font-size: 28rpx;
  color: #555;
  line-height: 1.6;
}
</style>
